<template>
	<view class="my-container">
		<view class="user-info" @click="handleUserInfo">
			<image class="avatar" :src="userInfo?.avatarUrl || '/static/my.png'" mode="aspectFill"></image>
			<view class="user-detail">
				<text class="username">{{ userInfo?.nickName || userInfo?.nickName || userInfo?.email }} </text>
				<text class="phone" v-if="userInfo?.phone">{{ userInfo.phone }}</text>
			</view>
		</view>

		<view class="button-group">
			<!-- <view class="button-group-item">
				<button class="setting-btn" @click="handleSetting">消息通知</button>
				<image src="/static/arrow-right.png" mode="aspectFit" ></image>
			</view> -->
			<view class="button-group-item">
				<button class="setting-btn" @click="handleSetting">设置</button>
				<image src="/static/arrow-right.png" mode="aspectFit" ></image>
			</view>
			<!-- <view class="button-group-item">
				<button class="setting-btn" @click="handleSetting">消息通知</button>
				<image src="/static/arrow-right.png" mode="aspectFit" >关于</image>
			</view> -->
			<view v-if="userInfo?.loginType === 0 " class="button-group-item">
				<button class="setting-btn" @click="handleBindEmail">邮箱绑定</button>
				<image src="/static/arrow-right.png" mode="aspectFit" ></image>
			</view>
		</view>

		<view v-if="userInfo?.id" class="button-group-logout">
			<button type="primary" class="logout-btn"  @click="handleLogout">退出登录</button>
			<!-- <button class="delete-btn" @click="handleDeleteAccount">注销账户</button> -->
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted,computed } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
//const userInfo = ref(null)

onMounted(() => {
	// 获取用户信息
	console.log('userStore.userInfo', userStore.userInfo)
//	userInfo.value = userStore.userInfo
})

//计算属性，实时更新用户信息
const userInfo = computed(() => {
  return userStore.userInfo
})

// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				userStore.logout()
				userStore.clearState();
				uni.removeStorageSync('startClockParams'); // 清除计时器页面的项目和待办信息
				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				})
				// 跳转到登录页
				uni.reLaunch({
					url: '/pages/login/index'
				})
			}
		}
	})
}

// 注销账户
const handleDeleteAccount = () => {
	uni.showModal({
		title: '警告',
		content: '注销账户后，所有数据将被永久删除，且无法恢复。确定要注销吗？',
		confirmColor: '#ff0000',
		success: async (res) => {
			if (res.confirm) {
				try {
					// TODO: 调用注销账户接口
					await userStore.deleteAccount()
					userStore.clearState();
					uni.showToast({
						title: '账户已注销',
						icon: 'success'
					})
					// 跳转到登录页
					uni.reLaunch({
						url: '/pages/login/index'
					})
				} catch (error) {
					uni.showToast({
						title: '注销失败' + error.message,
						icon: 'none'
					})
				}
			}
		}
	})
}

const handleBindEmail = () => {
	uni.navigateTo({
		url: '/pages/bindEmail/index'
	})
}

//进入设置界面
const handleSetting = () => {
	uni.navigateTo({
		url: '/pages/setting/index'
	})
}

const handleUserInfo = () => {
	uni.navigateTo({
		url: '/pages/userInfo/index'
	})
}

</script>

<style lang="scss">
.my-container {
	padding: 40rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.user-info {
	display: flex;
	align-items: center;
	padding: 40rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
	}
	
	.user-detail {
		display: flex;
		flex-direction: column;
		.username {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.phone {
			font-size: 28rpx;
			color: #666;
		}
	}
}

.button-group {
	padding:0 40rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin-bottom: 30rpx;

	.button-group-item{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.setting-btn {
			flex:1;
			text-align: left;
			font-size: 32rpx;
			background: none;
			border: none;
			outline: none;
			padding: 0;
			margin: 0;
			line-height: 88rpx;
			height: 88rpx;
			&::after {
				border: none;
			}
		}
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	&:last-child {
			margin-bottom: 0;
			border-bottom: none;
		}
}

.button-group-logout {
	padding: 40rpx;
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	background-color: transparent;
	.logout-btn, .delete-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 44rpx;
		font-size: 32rpx;
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.delete-btn {
		background-color: #ff4d4f;
		color: #fff;
	}
	}
</style> 